<template>
	<div class="chihuo">
		<div class="head">
			<span class="left" @click="aa()"><img :src="fanhui" alt=""></span>
			<span class="center"></span>
			<span class="right"></span>
		</div>
		<div class="ban">
			<img src="../../../static/img/tiu.png" height="481" width="624" alt="">
		</div>
		<section>
			<div class="box" v-for="box in boxs">
			<router-link :to="box.path">
				<h3>{{box.test}}</h3>
				<img :src="box.url" height="481" width="624" alt="">
				<p>{{box.text}}</p>
				<p><span>{{box.num}}</span></p>
			</router-link>
			</div>
		</section>
	</div>
</template>
<script>
	export default{
		data(){
			return{
				fanhui:'../../../static/img/fanhus.png',
				boxs:[
					{test:'人生的猪脚@梦想',url:'../../../static/img/chijia1_03.png',text:'猝不及防之时遭遇到了赤裸裸的心与灵',num:'01.4',path:'peoper'},
					{test:'人生的猪脚@梦想',url:'../../../static/img/chijia1_06.png',text:'猝不及防之时遭遇到了赤裸裸的心与灵',num:'01.4',path:'peoper'},
					{test:'人生的猪脚@梦想',url:'../../../static/img/chijia1_08.png',text:'猝不及防之时遭遇到了赤裸裸的心与灵',num:'01.4',path:'peoper'},
					{test:'人生的猪脚@梦想',url:'../../../static/img/chijia1_06.png',text:'猝不及防之时遭遇到了赤裸裸的心与灵',num:'01.4',path:'peoper'},{test:'人生的猪脚@梦想',url:'../../../static/img/chijia1_03.png',text:'猝不及防之时遭遇到了赤裸裸的心与灵',num:'01.4',path:'peoper'},{test:'人生的猪脚@梦想',url:'../../../static/img/chijia1_08.png',text:'猝不及防之时遭遇到了赤裸裸的心与灵',num:'01.4',path:'peoper'},

				]
			}
		},
		methods:{
			aa(){
				this.$router.go(-1)
			}
		}
	}
</script>
<style scoped lang="less">
@import '../../assets/css/reset.css';

.px2rem(@name, @px){
    @{name}: @px / 75 * 1rem;
}
.flexbox{
	display: flex;
}
.height(@ht){.px2rem(height,@ht)}
.line-height(@arg){.px2rem(line-height, @arg);}
.font-size(@arg){.px2rem(font-size, @arg);}

.font(@fz,@color){
    .px2rem(font-size,@fz);
    color: @color;
}
.border-radius(@arg){.px2rem(border-radius, @arg);}

.padding-top(@top){.px2rem(padding-top, @top);}
.padding-right(@right){.px2rem(padding-right, @right);}
.padding-bottom(@bottom){.px2rem(padding-bottom, @bottom);}
.padding-left(@left){.px2rem(padding-left, @left);}

.margin-top(@top){.px2rem(margin-top, @top);}
.margin-right(@right){.px2rem(margin-right, @right);}
.margin-bottom(@bottom){.px2rem(margin-bottom, @bottom);}
.margin-left(@left){.px2rem(margin-left, @left);}



.head{
	.flexbox;
	.height(93);
	justify-content: space-between;
	align-items: center;
	position: fixed;
	top:0;
	left:0;
	width:100%;
	.left,.right{
		.px2rem(width,100);
		text-align: center;
		img{
			.px2rem(width,56);
			.height(59);
		}
	}
	
}	
.ban{
	img{
		width:100%;
	}
}
section{
	position: relative;
	.margin-top(-140);
	width:100%;

	.box{
		width:90%;
		margin: 30px auto;
		border: 1px solid #000;
		background: #fff;
		.border-radius(15);
		h3{
			.padding-top(30);
			.padding-left(30);
			.padding-bottom(30);
		}
		p{
			width: 80%;
			.padding-top(30);
			.padding-left(30);
			color:#999;
			
		
		}
		img{
			width:100%;
		}
		p:nth-child(4){
			text-align: right;
		}
		
	}
}
</style>